<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试页面 - 朋友管理系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f7fa;
            padding: 20px;
        }
        .debug-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .friend-item {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .avatar-preview {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
        }
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .debug-info {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #5a6fd8;
        }
    </style>
</head>
<body>
    <h1>调试页面 - 朋友管理系统</h1>
    
    <div class="debug-section">
        <h2>API测试</h2>
        <button onclick="testFriendList()">测试朋友列表API</button>
        <button onclick="testFriendDetail()">测试朋友详情API</button>
        <div id="apiResult" class="debug-info"></div>
    </div>
    
    <div class="debug-section">
        <h2>朋友数据</h2>
        <div id="friendsData"></div>
    </div>
    
    <div class="debug-section">
        <h2>头像显示测试</h2>
        <div id="avatarTest"></div>
    </div>
    
    <script>
        // 测试朋友列表API
        function testFriendList() {
            fetch('/friend/api/list')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('apiResult').innerHTML = `
                        <strong>API响应:</strong><br>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    displayFriendsData(data.data);
                })
                .catch(error => {
                    document.getElementById('apiResult').innerHTML = `
                        <strong>API错误:</strong><br>
                        <pre>${error}</pre>
                    `;
                });
        }
        
        // 测试朋友详情API
        function testFriendDetail() {
            fetch('/friend/api/detail/1')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('apiResult').innerHTML = `
                        <strong>朋友详情API响应:</strong><br>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                })
                .catch(error => {
                    document.getElementById('apiResult').innerHTML = `
                        <strong>API错误:</strong><br>
                        <pre>${error}</pre>
                    `;
                });
        }
        
        // 显示朋友数据
        function displayFriendsData(friends) {
            if (!friends || friends.length === 0) {
                document.getElementById('friendsData').innerHTML = '<p>没有朋友数据</p>';
                return;
            }
            
            const friendsHTML = friends.map(friend => `
                <div class="friend-item">
                    <div class="avatar-preview">
                        <img src="${friend.avatar || '/static/images/default-avatar.svg'}" 
                             alt="头像" 
                             onerror="this.src='/static/images/default-avatar.svg'">
                    </div>
                    <strong>${friend.name}</strong><br>
                    <strong>Avatar字段值:</strong> ${friend.avatar || 'null/undefined'}<br>
                    <strong>完整数据:</strong> ${JSON.stringify(friend)}
                </div>
            `).join('');
            
            document.getElementById('friendsData').innerHTML = friendsHTML;
        }
        
        // 头像显示测试
        function testAvatarDisplay() {
            const testAvatars = [
                '/static/images/default-avatar.svg',
                '',
                'https://via.placeholder.com/100x100/667eea/ffffff?text=Test'
            ];
            
            const avatarHTML = testAvatars.map((src, index) => `
                <div style="display: inline-block; margin: 10px; text-align: center;">
                    <div class="avatar-preview">
                        <img src="${src}" alt="测试头像${index + 1}" 
                             onerror="this.src='/static/images/default-avatar.svg'">
                    </div>
                    <div>测试${index + 1}</div>
                </div>
            `).join('');
            
            document.getElementById('avatarTest').innerHTML = avatarHTML;
        }
        
        // 页面加载时执行测试
        document.addEventListener('DOMContentLoaded', function() {
            testAvatarDisplay();
        });
    </script>
</body>
</html>
